<template>
	<view class="page">
		<fu-custom :isBack="true" bgColor="bg-white solid-bottom">
			<view slot="content">{{i18n['全部评价']}}</view>
		</fu-custom>
		<!-- 页面加载 loading start-->
		<!-- TODO 处理页面出现两个loading图标 -->
		<!-- <fu-loading v-if="isShowLoading"></fu-loading> -->
		<!-- 页面加载 loading end-->
		<!-- TODO 处理页面出现两个loading图标  v-else -->
		<template>
			<!-- 顶部导航 start -->
			<view class="padding flex align-center flex-wrap bg-white">
				<view v-for="(item, index) in tabs" :key="index"
					class="margin-right-sm padding-tb-xs padding-lr-sm fu-fs28 round"
					:class="[currentTab == index ? 'active' : 'bg-f6 text-333']"
					@click="switchTab(index, item.type_name)">
					{{ item.type_title }}
					<text v-if="item.type_count" class="margin-left-10">{{ item.type_count }}</text>
				</view>
			</view>
			<!-- 顶部导航 end -->
			<!-- 评价内容列表 start-->
			<view class="bg-white padding-lr margin-top-sm">
				<!-- <view v-for="(item, index) in listData" :key="index" @click="goDetail(item)"> -->
					<view v-for="(item, index) in listData" :key="index" @click="goDetail(item)">
					<fu-evaluate :prop="item"></fu-evaluate>
					
					<view class="list">
						<view class="item" v-for="(items,i) in item.goods_comment_reply" :key="i">
							<view class="info">
								<view class="left">
									<fu-image radius='50%' :src="items.head_img" mode=""></fu-image>
								</view>
								<view class="right">
									<view class="name">
										{{ items.user_nickname }}
										{{items.is_merchant ==1 ?'[商家回复]':''}}
									</view>
									<view class="hour">
										{{items.create_time}}
									</view>
								</view>
							</view>
							<view class="desc">
								<view class="empty">
								</view>
								<view class="rep">
									{{items.content}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评价内容列表 end-->
		</template>
		<!-- 分页组件 start -->
		<fu-empty :paging-list-loaded-all="pagingListLoadedAll" :paging-list-no-list-data="pagingListNoListData"
			:list-data-length="listDataLength" :isLoadInit='isLoadInit'></fu-empty>
		<!-- 分页组件 end -->
		<!-- 网络检测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络检测 end -->
	</view>
</template>

<script>
	import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
	import fuEvaluate from '../../components/fu-evaluate/fu-evaluate.vue';
	export default {
		mixins: [pagingList],
		components: {
			fuEvaluate
		},
		data() {
			return {
				minixPagingListsApi: global.apiUrls.postGoodsCommentList, //明细请求地址
				pageingListApiMethod: "post", //请求方法
				allowOnloadGetList: false, // 是否允许页面onload生命周期进入后立马执行getlist
				tabs: [], //导航分类
				type_name: 'all', //导航分类 选中
				currentTab: 0, //选中的序号
				isShowLoading: false, //页面加载 loading
				goods_id: 0 //商品id
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo;
			},
		},
		/**
		 * @param {Object} options  goods_id:商品id
		 */
		onLoad(options) {
			const {
				goods_id
			} = options;
			this.goods_id = goods_id;
			this.postCommentTabList();
		},
		methods: {
			goDetail(item) {
			  console.log('xxxxx', item);
			  this.$util.actionAuth(() => {
			    this.$urouter.navigateTo({
			      url: '/pages/goods/goodsdetail/comment-detail/index',
			      params: item
			    });
			  });
			},
			/**
			 * @description  设置要请求的参数
			 * 在混入开发时，调用该方法和混入的请求参数合并在一起
			 */
			pagingListPostData() {
				return {
					goods_id: this.goods_id,
					star_type: this.type_name,
					// filter_type: this.filter_type,
					user_id: this.userInfo && this.userInfo.id || '',
				}
			},
			/**
			 * @description  导航描述语
			 * @param {Object} index 导航序号
			 * @param {Object} val  导航描述语
			 */
			switchTab(index, val) {
				if (index === this.currentTab) return
				this.type_name = val;
				this.currentTab = index;
				this.pagingListToggle();
			},
			postCommentTabList() {
				this.$api.post(global.apiUrls.postCommentTabList, {
					goods_id: this.goods_id
				}).then(res => {
					if (res.data.code == 1) {
						this.tabs = res.data.data;
						this.star_type = this.tabs[0].type_name;
						this.pagingListToggle();
					}
				}).catch(err => {

				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.active {
		background-color: #FFEFE8;
		border: 1rpx solid #FF6F27;
		color: #FF6F27;
	}
	
	.list {
		width: 100%;
		padding-left: 64rpx;
		.item {
			width: 100%;
			padding: 20rpx 0;
			box-sizing: border-box;
	
			.info {
				width: 100%;
				display: flex;
				align-items: center;
	
				.left {
					width: 80rpx;
					height: 80rpx;
	
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
	
				.right {
					flex: 1;
					margin-left: 10rpx;
	
					.name {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}
	
					.hour {
						font-size: 24rpx;
						color: #999;
	
					}
				}
			}
	
			.desc {
				width: 100%;
				display: flex;
	
	
				.empty {
					width: 90rpx;
	
				}
	
				.rep {
					flex: 1;
					line-height: 44rpx;
					word-wrap: break-word;
					word-break: break-all;
					margin-top: 16rpx;
				}
			}
		}
	
	}
</style>
